<template>
  <div class="deviceStatus" v-loading="loading" :element-loading-text="$t('oralScan.oralScan_116')">
    <el-card class="version-log-management-page__header">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="query.userId" :placeholder="$t('oralScan.oralScan_46')" clearable />
        </el-col>

        <el-col :span="8">
          <el-input
            v-model="query.serialNumber"
            :placeholder="$t('oralScan.oralScan_48')"
            clearable
          />
        </el-col>

        <el-col :span="8" class="query_btn">
          <el-button type="primary" icon="el-icon-search" @click="toSearch">
            {{ $t('versionLogManagement.version00') }}
          </el-button>
          <el-button type="primary" @click="exportExcel()">
            {{ $t('orderManage.export') }}
          </el-button>
          <el-button @click="reset()">{{ $t('add.add124') }}</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="table_box">
      <el-table :data="tableData" style="width: 100%" height="570" @sort-change="handleSortChange">
        <el-table-column
          prop="serialNumber"
          :label="$t('oralScan.oralScan_10')"
          align="center"
          sortable="custom"
        />
        <el-table-column
          prop="startTime"
          sortable="custom"
          :label="$t('oralScan.oralScan_110')"
          align="center"
        />
        <el-table-column prop="userId" :label="$t('oralScan.oralScan_111')" align="center" />
        <el-table-column
          sortable="custom"
          prop="softwareVersion"
          :label="$t('oralScan.oralScan_112')"
          align="center"
        />
        <el-table-column
          prop="ipAddress"
          sortable="custom"
          :label="$t('oralScan.oralScan_113')"
          align="center"
        />
        <el-table-column
          prop="recent7DayCase"
          :label="$t('oralScan.oralScan_114')"
          align="center"
        />
        <el-table-column :label="$t('oralScan.oralScan_115')" align="center">
          <el-table-column
            prop="totalEffectiveNum"
            :label="$t('oralScan.oralScan_104')"
            align="center"
          />
          <el-table-column prop="repairCount" :label="$t('oralScan.oralScan_105')" align="center" />
          <el-table-column prop="plantCount" :label="$t('oralScan.oralScan_106')" align="center" />
          <el-table-column
            prop="orthodonticsCount"
            :label="$t('oralScan.oralScan_108')"
            align="center"
          />
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      :current-page="query.page"
      :page-size="query.limit"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="onPageSizeChange"
      @current-change="onPageChange"
    />
  </div>
</template>

<script>
import { formatDate } from '@/utils/index';
import { exportExl } from '@/utils/xls';
export default {
  name: 'OralScan',

  data() {
    return {
      loading: false,
      tableData: [],
      query: {
        page: 1,
        limit: 10,
        userId: '',
        serialNumber: '',
      },
      total: 0,
    };
  },

  created() {
    this.toSearch();
  },
  mounted() {},
  methods: {
    toSearch() {
      this.query.page = 1;
      this.search();
    },
    handleSortChange({ prop, order }) {
      if (prop === 'serialNumber') {
        this.query.sortField = 'serial_number';
      } else if (prop === 'startTime') {
        this.query.sortField = 'start_time';
      } else if (prop === 'softwareVersion') {
        this.query.sortField = 'software_version';
      } else if (prop === 'ipAddress') {
        this.query.sortField = 'ip_address';
      }
      if (order === 'ascending') {
        this.query.sortType = 'asc';
      } else if (order === 'descending') {
        this.query.sortType = 'desc';
      }
      this.toSearch();
    },
    search() {
      this.$http({
        url: '/orderdatarecord/equipmentStatusRecord',
        method: 'get',
        params: this.query,
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onPageSizeChange(pageSize) {
      this.query.limit = pageSize;
      this.search();
    },
    onPageChange(page) {
      this.query.page = page;
      this.search();
    },
    reset() {
      this.query = {
        page: 1,
        limit: 10,
        userId: '',
        serialNumber: '',
      };
      this.toSearch();
    },
    exportExcel() {
      this.loading = true;
      this.$http({
        method: 'get',
        url: 'orderdatarecord/equipmentStatusRecordsExportExcel', //后端接口
        responseType: 'blob',
        params: {
          page: this.query.page,
          limit: this.total,
          userId: this.query.userId,
          serialNumber: this.query.serialNumber,
        },
      }).then(({ data: res }) => {
        let date = formatDate(new Date(), 'second');
        exportExl(res, `${this.$t('oralScan.oralScan_4')}_${date}.xls`);
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.deviceStatus {
  width: 100%;
  height: 100%;

  .el-select,
  .el-date-editor {
    width: 100%;
  }

  .table_box {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .query_btn {
    text-align: right;
  }
}
</style>
